{% extends "base.html" %}

{% block title %}问题列表 - EI Power反馈管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-collection"></i> 所有问题</h2>
            <div>
                <a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-house"></i> 返回首页
                </a>
                {% if current_user.is_admin %}
                <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-primary">
                    <i class="bi bi-gear"></i> 管理面板
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 统计信息 -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-primary">{{ stats.total }}</h3>
                <p class="mb-0 text-muted">总问题数</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-info">{{ stats.new_count }}</h3>
                <p class="mb-0 text-muted">新问题</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-warning">{{ stats.processing_count }}</h3>
                <p class="mb-0 text-muted">处理中</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <h3 class="text-success">{{ stats.resolved_count }}</h3>
                <p class="mb-0 text-muted">已解决</p>
            </div>
        </div>
    </div>
</div>

<!-- 筛选和搜索 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <form method="GET" class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">状态筛选</label>
                        <select name="status" class="form-select" onchange="this.form.submit()">
                            <option value="all" {% if current_status == 'all' %}selected{% endif %}>全部状态</option>
                            <option value="新问题" {% if current_status == '新问题' %}selected{% endif %}>新问题</option>
                            <option value="处理中" {% if current_status == '处理中' %}selected{% endif %}>处理中</option>
                            <option value="已解决" {% if current_status == '已解决' %}selected{% endif %}>已解决</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">搜索内容</label>
                        <input type="text" name="search" class="form-control" placeholder="搜索问题内容..." value="{{ search_query }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <button type="submit" class="btn btn-primary d-block w-100">
                            <i class="bi bi-search"></i> 搜索
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 提案列表 -->
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="bi bi-list-ul"></i> 问题列表 ({{ proposals|length }} 条)</h5>
            </div>
            <div class="card-body">
                {% if proposals %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 12%;">编号</th>
                                    <th style="width: 10%;">提议人</th>
                                    <th style="width: 35%;">问题内容</th>
                                    <th style="width: 8%;">状态</th>
                                    <th style="width: 10%;">提交时间</th>
                                    <th style="width: 10%;">处理人</th>
                                    <th style="width: 15%;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for proposal in proposals %}
                                <tr>
                                    <td><code class="small">{{ proposal.id }}</code></td>
                                    <td>
                                        <span class="badge bg-secondary">{{ proposal.name }}</span>
                                        <br><small class="text-muted">{{ proposal.username }}</small>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 300px;" title="{{ proposal.content }}">
                                            {{ proposal.content }}
                                        </div>
                                    </td>
                                    <td>
                                        {% if proposal.status == '新问题' %}
                                            <span class="badge bg-primary">{{ proposal.status }}</span>
                                        {% elif proposal.status == '处理中' %}
                                            <span class="badge bg-warning">{{ proposal.status }}</span>
                                        {% elif proposal.status == '已解决' %}
                                            <span class="badge bg-success">{{ proposal.status }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {{ proposal.created_at.strftime('%m-%d %H:%M') if proposal.created_at else '' }}
                                        </small>
                                    </td>
                                    <td>
                                        {% if proposal.handler_name %}
                                            <span class="badge bg-info">{{ proposal.handler_name }}</span>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <button class="btn btn-outline-info btn-sm" 
                                                data-id="{{ proposal.id }}"
                                                data-username="{{ proposal.name|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                data-content="{{ proposal.content|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                data-status="{{ proposal.status }}"
                                                data-revised="{{ (proposal.revised_proposal or '')|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                data-comment="{{ (proposal.admin_comment or '')|replace('"', '&quot;')|replace("'", "&#39;") }}"
                                                data-handler="{{ proposal.handler_name or '' }}"
                                                data-created="{{ proposal.created_at.strftime('%Y-%m-%d %H:%M:%S') if proposal.created_at else '' }}"
                                                data-updated="{{ proposal.updated_at.strftime('%Y-%m-%d %H:%M:%S') if proposal.updated_at else '' }}"
                                                onclick="viewProposalDetail(this)">
                                            <i class="bi bi-eye"></i> 查看
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-inbox display-1 text-muted"></i>
                        <h5 class="text-muted mt-3">暂无问题</h5>
                <p class="text-muted">当前筛选条件下没有找到问题</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 问题详情模态框 -->
<div class="modal fade" id="proposalDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-file-text"></i> 问题详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>编号：</strong>
                        <code id="detail-id"></code>
                    </div>
                    <div class="col-md-6">
                        <strong>提议人：</strong>
                        <span id="detail-username" class="badge bg-secondary"></span>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>提交时间：</strong>
                        <span id="detail-created" class="text-muted"></span>
                    </div>
                    <div class="col-md-6">
                        <strong>更新时间：</strong>
                        <span id="detail-updated" class="text-muted"></span>
                    </div>
                </div>
                
                <div class="mb-3">
                    <strong>问题内容：</strong>
                    <div class="bg-light p-3 rounded mt-2" id="detail-content"></div>
                </div>
                
                <div class="mb-3">
                    <strong>当前状态：</strong>
                    <span id="detail-status-badge"></span>
                </div>
                
                <div class="mb-3" id="detail-revised-section" style="display: none;">
                    <strong>修正问题：</strong>
                    <div class="bg-info bg-opacity-10 p-3 rounded mt-2" id="detail-revised-proposal"></div>
                </div>
                
                <div class="mb-3" id="detail-comment-section" style="display: none;">
                    <strong>处理意见：</strong>
                    <div class="bg-success bg-opacity-10 p-3 rounded mt-2" id="detail-admin-comment"></div>
                </div>
                
                <div class="mb-3" id="detail-handler-section" style="display: none;">
                    <strong>处理人：</strong>
                    <span id="detail-handler" class="badge bg-info"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
function viewProposalDetail(button) {
    const data = button.dataset;
    
    document.getElementById('detail-id').textContent = data.id;
    document.getElementById('detail-username').textContent = data.username;
    document.getElementById('detail-content').textContent = data.content;
    document.getElementById('detail-created').textContent = data.created || '-';
    document.getElementById('detail-updated').textContent = data.updated || '-';
    
    // 设置状态徽章
    const statusBadge = document.getElementById('detail-status-badge');
    statusBadge.textContent = data.status;
    statusBadge.className = 'badge ';
    if (data.status === '新问题') {
        statusBadge.className += 'bg-primary';
    } else if (data.status === '处理中') {
        statusBadge.className += 'bg-warning';
    } else if (data.status === '已解决') {
        statusBadge.className += 'bg-success';
    }
    
    // 显示/隐藏修正问题
    const revisedSection = document.getElementById('detail-revised-section');
    if (data.revised && data.revised.trim()) {
        document.getElementById('detail-revised-proposal').textContent = data.revised;
        revisedSection.style.display = 'block';
    } else {
        revisedSection.style.display = 'none';
    }
    
    // 显示/隐藏处理意见
    const commentSection = document.getElementById('detail-comment-section');
    if (data.comment && data.comment.trim()) {
        document.getElementById('detail-admin-comment').textContent = data.comment;
        commentSection.style.display = 'block';
    } else {
        commentSection.style.display = 'none';
    }
    
    // 显示/隐藏处理人
    const handlerSection = document.getElementById('detail-handler-section');
    if (data.handler && data.handler.trim()) {
        document.getElementById('detail-handler').textContent = data.handler;
        handlerSection.style.display = 'block';
    } else {
        handlerSection.style.display = 'none';
    }
    
    // 显示模态框
    new bootstrap.Modal(document.getElementById('proposalDetailModal')).show();
}
</script>
{% endblock %}